import React from 'react'
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom'
import api from '../../apis/start';
import { Button, message } from 'antd';
import { useState } from 'react';
const Start = () => {
    const navigate = useNavigate()
    const params = useParams()
    const [dataAll, setDataAll] = useState({})
    useEffect(() => {
        api.getTestsById({ _Id: params._id }).then((res => {
            console.log(res.data);
            if (res.data.code == 1) {
                message.success('试卷信息获取成功')
                setDataAll(res.data.data)
            } else {
                message.error('试卷信息获取失败')
            }
            console.log(dataAll);
        }))
    }, [])
    return (
        <div>
            <div className='bodys'>
                <div className='cent'>
                    <div style={{ width: '100%', height: '60px', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '20px' }}>{dataAll.title
}</div>
                    <p style={{ margin: '0 15px' }}> 试卷信息</p>
                    <div style={{ width: '100%', height: '160px', padding: '10px 15px' }}>
                        <div style={{ width: '100%', height: '100%', border: '1px solid #dbdbdb' }}>
                            <p className='textp'>考试类型：<span className='spantext'>正在考试</span></p>
                            <p className='textp'>考试时间：<span className='spantext'>{dataAll['start-time']} ~ {dataAll['end-time']} 11:00</span></p>
                            <p className='textp'>答卷时间：<span className='spantext'>{dataAll.durations
}分钟</span></p>
                            <p className='textp'>考试方式：<span className='spantext'>线上</span></p>
                        </div>
                    </div>
                    <p style={{ margin: '0 15px' }}>考生信息</p>
                    <div style={{ width: '100%', height: '120px', padding: '10px 15px' }}>
                        <div style={{ width: '100%', height: '100%', border: '1px solid #dbdbdb' }}>
                            <p className='textp'>姓名：<span className='spantext'>张三</span></p>
                            <p className='textp'>证件号码：<span className='spantext'>3423445234634451231</span></p>
                            <p className='textp'>部门：<span className='spantext'>信息中心</span></p>
                        </div>
                    </div>
                    <div style={{ width: '100%', height: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center', }}><button
                        className='next'>返回上一步</button><button className='end' onClick={() => { navigate(`/answer/${dataAll._id}`) }}>开始答题</button></div>
                </div>
            </div>
        </div>
    )
}
export default Start